<%@ page import="java.sql.*" %><%--
  Created by IntelliJ IDEA.
  User: Muerzhi
  Date: 2023/12/24
  Time: 22:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
</head>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="background">
    <ul id="tab">
        <li><a href="#content1" id="a">所有书籍</a></li>
        <li><a href="#content2" id="b">新增书籍</a></li>
        <li><a href="#content3" id="c">修改书籍</a></li>
        <li><a href="#content4" id="d">删除书籍</a></li>
    </ul>
    <div id="content">
        <div id="content1" style="background:url(picture/bookcase.jpg);
             background-repeat:no-repeat;
             background-attachment:fixed;
             background-size:100%; ">

            <form action="index.jsp" method="get" class="se">
                <input type="text" name="selectId" placeholder="请输入要查找的书籍号或书籍名" class="name"><br>
                <input type="submit" value="查找" class="into">
            </form>

            <%
                String selectId=request.getParameter("selectId");
            %>

            <%
                Class.forName("com.mysql.cj.jdbc.Driver");
                String url="jdbc:mysql://localhost:3306/library";
                String username="root";
                String password="17876724541";
                Connection conn= DriverManager.getConnection(url,username,password);
                Statement stat=conn.createStatement();

                String sql="select * from book where bookId=? or bookName=?";
                PreparedStatement ps= conn.prepareStatement(sql);
                ps.setString(1,selectId);
                ps.setString(2,selectId);
                ResultSet rs=ps.executeQuery();
                out.println("<table border=\"1\" cellspacing=\"0\" class=\"one\">" );
                out.println("<tr><th>书号</th><th>书名</th><th>作者</th><th>出版社</th><th>价格（元/本）</th><th>内容</th></tr>");
                while(rs.next()){
                    String id=rs.getString("bookId");
                    String name=rs.getString("bookName");
                    String author=rs.getString("bookAuthor");
                    String house=rs.getString("bookHouse");
                    String money=rs.getString("bookMoney");
                    out.println("<tr><td>"+id+"</td><td>"+name+"</td><td>"+author+"</td><td>"+house+"</td><td>"+money+"</td><td><a href=\"content.jsp?bookId="+id+"#bookName="+name+"\" class=\"aa\">阅读</a></td></tr>");
                }
                out.print("</table>");
//                stat.close();
//                conn.close();
            %>

<%--            打印所有书籍信息--%>
            <%
//                Class.forName("com.mysql.cj.jdbc.Driver");
//                String url="jdbc:mysql://localhost:3306/library";
//                String username="root";
//                String password="17876724541";
//                Connection conn= DriverManager.getConnection(url,username,password);
//                Statement stat=conn.createStatement();

                String sql1="select bookId,bookName,bookAuthor,bookHouse,bookMoney from book";
                ResultSet rs1=stat.executeQuery(sql1);
                out.println("<table border=\"1\" cellspacing=\"0\" id=\"two\">");
                out.println("<tr><th>书号</th><th>书名</th><th>作者</th><th>出版社</th><th>价格（元/本）</th><th>内容</th></tr>");
                while(rs1.next()){
                    String id=rs1.getString("bookId");
                    String name=rs1.getString("bookName");
                    String author=rs1.getString("bookAuthor");
                    String house=rs1.getString("bookHouse");
                    String money=rs1.getString("bookMoney");
                    out.println("<tr><td>"+id+"</td><td>"+name+"</td><td>"+author+"</td><td>"+house+"</td><td>"+money+"</td><td><a href=\"content.jsp?bookId="+id+"#bookName="+name+"\" class=\"aa\">阅读</a></td></tr>");
                }
                out.print("</table>");
                stat.close();
                conn.close();
            %>
        </div>
        <div id="content2" style="background:url(picture/add.webp);
             background-repeat:no-repeat;
             background-attachment:fixed;
             background-size:100%; ">
            <form action="add.jsp" method="post" class="select">
                <input type="text" placeholder="请输入新增的书籍名" class="name" name="newName"><br>
                <input type="text" placeholder="请输入新增的书籍作者" class="name" name="newAuthor"><br>
                <input type="text" placeholder="请输入新增的书籍出版社" class="name" name="newHouse"><br>
                <input type="text" placeholder="请输入新增的书籍价格" class="name" name="newMoney"><br>
                <input type="submit" value="确定增加" class="into">
            </form>

        </div>
        <div id="content3" style="background:url(picture/update.jpg);
             background-repeat:no-repeat;
             background-attachment:fixed;
             background-size:100%; ">
            <form action="revise.jsp" method="post" id="revise" class="select">
                <input type="text" name="reId" placeholder="请输入要修改的书籍号" class="name"><br>
                <input type="submit" value="确认修改" class="into"><br>
                <input type="text" name="reName" placeholder="请输入要修改的书籍" class="name"><br>
                <input type="text" name="reAuthor" placeholder="请输入要修改的书籍作者" class="name"><br>
                <input type="text" name="reHouse" placeholder="请输入要修改的书籍出版社" class="name"><br>
                <input type="text" name="reMoney" placeholder="请输入要修改的书籍价格" class="name">
            </form>
        </div>
        <div id="content4" style="background:url(picture/delete.jpg);
             background-repeat:no-repeat;
             background-attachment:fixed;
             background-size:100%; ">
            <form action="delete.jsp" method="post" id="delete" class="select">
                <input type="text" name="deId" placeholder="请输入要删除的书籍号或书籍名" class="name"><br>
                <input type="submit" value="确认删除" class="into">
            </form>
        </div>
    </div>

</div>
</body>
<script>
    // 当点某一个标签的时候对应的 div 显示，其他的隐藏。
    // 查找触发事件的元素
    var as = document.querySelectorAll("#tab a");
    // 绑定事件处理函数
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 隐藏所有的 div
            var divs = document.querySelectorAll("#content>div");
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = "none";
            }
            // 让对应的 div显示
            // 获取当前的 a 的 href
            var i = this.href.lastIndexOf("#");
            var id = this.href.slice(i);
            console.log(id)
            document.querySelector(id).style.display = "block";
        }

    }
</script>
</html>
